import React from 'react';
import Header from '../../components/Header';
import { connect } from 'react-redux';
import {bindActionCreators} from 'redux'
import {UserInfo} from '../../store/actioins/UserAction'
import getMusicListAction from '../../store/actioins/MusicListAction'
class Home extends React.Component{

    click() {
    }

    componentWillMount() {
        if(!this.props.musicList.length) {
            this.props.getMusicList();
        }
        
    }

    render () {
        const props  = this.props;
        let list = props.musicList || [];
        return (
            <div>
                {
                    list.map((item, index) => {
                        return (
                            <div key={index}>{item.alt}</div>
                        )
                    })
                }
            </div>
        );
    }

}

Home.loadData = (store) => {
    // 预先加载数据
    return store.dispatch(getMusicListAction())
}

export default connect(
    (state) => {
        return {
            userInfo: state.user,
            musicList: state.music.list
        }
    },
    (dispatch) => ({
        getMusicList() {
            dispatch(getMusicListAction())
        }
    })
)(Home);


// (dispatch) => {
//     return {
//       SetUserInfo: bindActionCreators(UserInfo, dispatch),
//       getMusicList: bindActionCreators(getMusicListAction, dispatch)
//     }
//   }